<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音樂頻譜網頁</title>
    <script src="//code.createjs.com/createjs-2015.11.26.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            display: block;
        }
    </style>   
</head>
<body> 
    <canvas id="canvas" style="background-color:#232323"></canvas>  
    <script>
                                function          resizeCanvas                        
                            (   ){                                                    
                      var     e=                            document                  
                    .                                           getElementById        
                ( 'canvas'                                        ); e                
              .                                                       setAttribute    
            ( 'width'  ,                                                window        
          .innerWidth) ,                  e                               .           
        setAttribute   (              'height' ,                            window    
        . innerHeight)                ; }function                             SoundMp3 
      ( e ) {createjs.              Sound        .                            alternateExtensions 
      =     ['mp3'  ],                createjs   .                              Sound 
    .registerSound( e,                'sound') ,                                createjs 
    .   Sound  .on     (                  'fileload'                                  
  ,    loadHandler )  ;}                                                              
  function  loadHandler(                                                              
  ){var e =createjs.Sound.                                                            
play('sound');e. volume=0.1;                                                        var 
t= createjs.Sound.activePlugin                                                        
. context;analyserNode  =t     .                                                      
createAnalyser   (),  analyserNode .                                                  
fftSize    =2048,analyserNode.connect (   t.                                          
destination   ) ;var a=createjs .Sound.activePlugin.                                  
dynamicsCompressorNode;a.disconnect (  ) ,a.connect    (                              
analyserNode),freqByteData= new Uint8Array(analyserNode  .                            
frequencyBinCount);for(var n=0;n <freqByteData.length;n ++ )                        { 
  var r=new createjs .Graphics(  );r. beginFill (  '#fff' ),r.                      drawRect
  (0,-10, window.innerWidth/2048,20);var i=new createjs.Shape(                        
  r) ;stage. addChild(i),i.x =6*n,i.y=window. innerHeight  /2,                        
    soundArray.push   (i );}createjs.Ticker.setFPS(60),createjs.                      
    Ticker    .addEventListener( 'tick'  ,      handleTick  ) ;}                      
    function handleTick( ){analyserNode.          getByteFrequencyData          (     
      freqByteData);for( var    e=0;e<              freqByteData              .       
        length;e ++ ) soundArray[e]  .              scaleY     =              freqByteData 
        [ e]/5*-1 ;stage.update();} var           analyserNode ,            freqByteData 
          , canvas,stage,soundArray  = [];      window .onresize          =           
            resizeCanvas, window   .onload     = function  (){          resizeCanvas  
              ( ),SoundMp3('mp3/bensound-buddy.mp3'  ),canvas=        document        
                .  getElementById ('canvas') ,stage    =new       createjs            
                    . Stage(canvas)   ;var e=new createjs.      Bitmap                
                      ('./images/bg-audio.jpg').set  ( {      scaleX                  
                            :1.2,scaleY :1.2} );stage.                                
                                addChild  ( e );}  ;                                  

    </script>
</body>
</html>